<template>
  <div class="poster-wrapper" v-if="payStatus && config">
    <Scroll class="poster-scroll" ref="postScroll" :data="payStatus">
      <div>
        <div class="poster">
          <img :src="config.equity[0].poster" alt @load="$refs.postScroll.refresh()" />
        </div>
      </div>
    </Scroll>
    <div class="btn">
      <div class="btn-box">
        <button class="price-tip" @click="toPayClick">{{config.equity[0].price}} 元/年</button>
        <div class="join">
          <my-button :name="joinTitle" @btnClick="toPayClick" />
        </div>
      </div>
    </div>
    <transition name="slide">
      <router-view @success="handleSuccess"></router-view>
    </transition>
    <!-- 正在审核 -->
    <Tip ref="check" class="check" title="正在审核">
      <div class="content">
        <div class="img-box">
          <img src="@/assets/images/icon_zzsh.png" alt />
        </div>
        <p class="txt">您的资料信息正在审核</p>
        <p class="txt">请耐心等待</p>
        <my-button name="确定" class="check-btn" @btnClick="checkBtnConfirm" />
      </div>
    </Tip>
    <!-- 审核失败 -->
    <Tip ref="fail" class="fail" title="审核失败">
      <div class="content">
        <div class="img-box">
          <img src="@/assets/images/icon_shsb.png" alt />
        </div>
        <p class="txt">您的资料信息{{payStatus.apply.reason}}未通过审核</p>
        <p class="txt">请重新提交</p>
        <my-button name="重新提交" class="fail-btn" @btnClick="$refs.fail.hide()" />
      </div>
    </Tip>
  </div>
</template>
<script>
import Scroll from '@/components/scroll/scroll'
import Tip from '@/components/tip/tip'
import { getPayStatus } from '@/api/pay'
import Config from '@/views/my/mixins/config-list'
const ERR_OK = 200
export default {
  components: {
    Scroll,
    Tip
  },
  mixins: [Config],
  data () {
    return {
      payStatus: null,
      joinTitle: '加入DDS·C'
    }
  },
  created () {
    this._getPayStatus()
  },
  watch: {
    payStatus (newVal) {
      if (!newVal.status) {
        this.joinTitle = '加入DDS·C'
      } else {
        if (newVal.apply.status === 0) {
          this.$nextTick(() => {
            this.$refs.check.show()
          })
        } else if (newVal.apply.status === 1) {
          this.joinTitle = '立即续费'
        } else if (newVal.apply.status === -1) {
          this.$nextTick(() => {
            this.$refs.fail.show()
          })
          this.joinTitle = '加入DDS·C'
        }
      }
    }
  },
  methods: {
    checkBtnConfirm () {
      this.$router.replace('/designer')
    },
    handleSuccess () {
      this._getPayStatus()
    },
    toPayClick () {
      if (!this.payStatus.status) {
        this.$router.push({ path: '/designer/poster/application' })
      } else {
        if (this.payStatus.apply.status === 0) {
          this.$toast('正在审核中~')
        } else if (this.payStatus.apply.status === 1) {
          this.$router.push({
            path: '/designer/poster/application',
            query: { renew: 1, apply: JSON.stringify(this.payStatus.apply) }
          })
        } else if (this.payStatus.apply.status === -1) {
          this.$router.push({ path: '/designer/poster/application' })
        }
      }
    },
    _getPayStatus () {
      getPayStatus()
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.payStatus = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.poster-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f7f7f7;
  z-index: 7;
  .poster-scroll {
    width: 100%;
    height: 100%;
  }
  .poster {
    img {
      width: 100%;
    }
  }
  .btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #eeeeee;
    .btn-box {
      display: flex;
      align-content: center;
    }
    .price-tip {
      flex: 0.5;
      height: 0.8rem;
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 600;
      color: rgba(5, 2, 1, 1);
      text-align: center;
      border: none;
      outline: none;
      background: #eeeeee;
    }
    .join {
      font-size: 0;
      flex: 0.5;
    }
  }
}
@include slideEnter();
.tip {
  .txt {
    margin-top: 0.9rem;
    p {
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0, 4, 0, 1);
      line-height: 0.46rem;
      text-align: center;
    }
  }
  .my-button {
    margin-top: 0.62rem;
  }
}
.check,
.fail {
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .img-box {
      width: 0.72rem;
      height: 0.72rem;
      margin-top: 0.5rem;
      img {
        width: 100%;
        vertical-align: top;
      }
    }
    .txt {
      width: 2.93rem;
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 0.47rem;
      text-align: center;
      white-space: nowrap;
      &:nth-of-type(1) {
        margin-top: 0.5rem;
      }
    }
    .check-btn,
    .fail-btn {
      margin-top: 1rem;
      font-size: 0;
      width: 100%;
    }
  }
}
</style>
